<template>
  <div class="flex gap10px m-y-10px">
    <div
      :style="{
        backgroundImage: `url(${
          userStore.userInfo.userVo.avatar || userStore.defaultAvatar
        })`,
      }"
      class="w-48px h-48px b-rd-full pos-relative bg-cover bg-center"
    ></div>
    <div class="flex-1">
      <el-input
        v-model="commentFrom.commentText"
        :autosize="{ minRows: 2, maxRows: 2 }"
        type="textarea"
        :placeholder="props.inputPlaceholder || '天青色等烟雨，评论区在等你'"
        :textarea-style="{ resize: 'none' }"
        :disabled="props.disabled"
      />

      <div class="flex justify-between m-t-10px items-center">
        <div
          class="w-32px h-26px b b-solid b-#999 flex items-center justify-center relative"
          @click="commentEmjioFlag = !commentEmjioFlag"
        >
          <span class="iconfont icon-biaoqing-xue"></span>
          <Picker
            v-if="commentEmjioFlag"
            :data="emojiIndex"
            set="twitter"
            @select="selectEmoji"
            class="absolute top-28px left-0 z-10"
          />
        </div>

        <el-button
          class="!w-70px !h-32px"
          type="primary"
          @click="sendComment"
          :disabled="
            commentFrom.commentText == null || commentFrom.commentText == ''
          "
          :loading="sendCommentLoading"
        >
          发送
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import data from "emoji-mart-vue-fast/data/all.json";
import "emoji-mart-vue-fast/css/emoji-mart.css";
import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
import { useUserStore } from "@/store/userStore";
import { ref } from "vue";
import type {
  ContentCommentForm,
  ContentCommentVO,
} from "@/api/contentComment/types";
import { addContentComment as addContentCommentApi } from "@/api/contentComment";

const props = defineProps<{
  contentId: string | number; // 视频ID
  contentType: number; // 评论类型 1-视频，2-音频，3-文章
  inputPlaceholder?: string; // 输入框提示语
  rootId?: string | number; // 根评论ID
  comments?: ContentCommentVO; // 评论数据
  disabled?: boolean; // 是否禁用评论
}>();

const emit = defineEmits(["getCommentList"]);

const userStore = useUserStore();

const sendCommentLoading = ref(false); // 发送评论按钮加载状态

// 标签组件加载
let emojiIndex = new EmojiIndex(data);

// 设置表情
const selectEmoji = (emoji) => {
  commentFrom.value.commentText = commentFrom.value.commentText + emoji.native;
};

// 评论表单
const commentFrom = ref<ContentCommentForm>({
  commentText: "",
  contentId: props.contentId,
  contentType: props.contentType,
  parentId: props.comments?.id || 0,
  rootId: props.rootId || 0,
  replyToUserId: props.comments?.createBy || null,
});

// 评论表情框开关
const commentEmjioFlag = ref(false);

// 发送评论
const sendComment = async () => {
  sendCommentLoading.value = true; // 开始加载
  await addContentCommentApi(commentFrom.value);
  commentFrom.value.commentText = "";
  sendCommentLoading.value = false; // 停止加载
  emit("getCommentList", null, true);
};
</script>

<style scoped></style>
